<html>
<HEAD>
<TITLE>网页顶部大横幅</TITLE>

<style type="text/css" >
body {
	margin: 0px; padding: 0px;
}
.topBanner .main {
	position: relative;
}
.topBanner .bannerMax {
	background: url("images/banner_max.jpg") no-repeat top; height: 392px; overflow: hidden; display: none;
}
.topBanner .bannerMax .Btn {
	background: url("images/arrow.png") no-repeat; top: 35px; right: 10px; width: 23px; height: 23px; overflow: hidden; position: absolute; cursor: pointer;
}
.topBanner .bannerMin {
	background: url("images/banner_min.jpg") no-repeat top; height: 100px; overflow: hidden; display: block;
}
.topBanner .bannerMin .Btn {
	background: url("images/arrow.png") no-repeat left -23px; top: 35px; right: 10px; width: 23px; height: 23px; overflow: hidden; position: absolute; cursor: pointer;
}
.topBanner .bannerMax a {
	height: 392px; display: block;
}
.topBanner .bannerMin a {
	height: 100px; display: block;
}
</style>
 
</HEAD>
<BODY>

<DIV class="topBanner">
  <DIV class="bannerMax">
    <DIV class="main">
      <DIV class="Btn"></DIV>
	  <A href="http://www.webkaka.com/" target="_blank"></A>
	</DIV>
  </DIV>
  <DIV class="bannerMin">
    <DIV class="main">
      <DIV class="Btn"></DIV>
	  <A href="http://www.webkaka.com/" target="_blank"></A>
	</DIV>
  </DIV>
</DIV>

<SCRIPT type="text/javascript" src="js/jquery-1.9.0.min.js"></SCRIPT>
<script type="text/javascript">
$(document).ready(function(){
 jQuery(function(){
  jQuery(".bannerMax .Btn").click(function(){
    jQuery('.bannerMax').slideUp(500);
    jQuery('.bannerMin').slideDown(500);
  });
  jQuery(".bannerMin .Btn").click(function(){
    jQuery('.bannerMin').slideUp(500);
    jQuery('.bannerMax').slideDown(500);
  });
 });
 setTimeout(function(){
  jQuery('.bannerMin').slideUp(500);
  jQuery('.bannerMax').slideDown(500);
 },500);
 setTimeout(function(){
  jQuery('.bannerMax').slideUp(500);
  jQuery('.bannerMin').slideDown(500);
 },3500);
});
</script>
</BODY>
</html>
<!--
文章来源：http://www.webkaka.com/tutorial/html/2020/031480/
网页顶部大横幅#可展开收起#【CSS+jQuery源码】
//-->